<template>
  <a-card>
    <TableSearch
      ref="tableSearch"
      :fields="fields"
      @searchEmit="searchEmit"
      @resetEmit="resetEmit"
      :isRefreshBtn="true"
      @refreshEmit="$refs.table.refresh()"
      :toolSettings="toolSettings"
    />
    <s-table
      ref="table"
      rowKey="id"
      :size="tableSize"
      :columns="columns"
      :data="tableData"
    >
      <template slot="number" slot-scope="text">
        {{ text || '-' }}
      </template>
      <template slot="status" slot-scope="text">
        <a-tag v-if="text == 0" class="cursor" color="#52c41a">已出库</a-tag>
        <a-tag v-else class="cursor">未出库</a-tag>
      </template>
      <template slot="o" slot-scope="_, record">
        <a-button @click="edit(record)" type="link" size="small">编辑</a-button>
        <a-popconfirm
          title="确定删除该条黑名单吗?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteBlack(record)"
        >
          <a-button :loading="record.loading" type="link" size="small">删除</a-button>
        </a-popconfirm>
      </template>
    </s-table>
    <BlackForm ref="BlackForm" />
  </a-card>
</template>

<script>
import { TableSearch, STable } from '@/components'
import { getBlackListAPI, editBlackAPI, deleteBlackAPI } from '@/api/black'
import { searchEmit, resetEmit } from '@/views/biz/common'
import { downloadFile } from '@/utils/util'
import BlackForm from './modules/BlackForm.vue'

export default {
  components: { TableSearch, STable, BlackForm },
  data () {
    return {
      toolSettings: [
        { text: '导出黑名单', icon: 'export', type: 'primary', click: this.export, loading: false }
      ],
      fields: [
        { field: 'number', type: 'input', label: '车牌号码', value: '', placeholder: '请输入' },
        { field: 'realname', type: 'input', label: '用户姓名', value: '', placeholder: '请输入' },
        { field: 'phone', type: 'input', label: '联系电话', value: '', placeholder: '请输入' }
      ],
      columns: [
        { title: '车牌号码', dataIndex: 'number', width: 100, align: 'center', scopedSlots: { customRender: 'number' } },
        { title: '用户姓名', dataIndex: 'realname', width: 100 },
        { title: '联系电话', dataIndex: 'phone', width: 120, align: 'center' },
        { title: '备注', dataIndex: 'note', ellipsis: true },
        { title: '创建时间', dataIndex: 'createTime', width: 150, align: 'center' },
        { title: '更新时间', dataIndex: 'updateTime', width: 150, align: 'center' },
        { title: '操作', dataIndex: 'operation', align: 'center', width: 180, scopedSlots: { customRender: 'o' }, fixed: 'right' }
      ],
      tableData: query => {
        return getBlackListAPI(Object.assign(query, this.params))
      },
      params: {
        number: '',
        realname: '',
        phone: ''
      }
    }
  },
  methods: {
    searchEmit,
    resetEmit,
    /** @name 导出 **/
    export () {
      this.$confirm({
        title: '温馨提示',
        content: '确定导出当前所有黑名单信息吗？',
        onOk: () => {
          const target = this.toolSettings.find(item => item.text === '导出黑名单')
          target.loading = true
          downloadFile('/blackList/export').then(() => {
            this.$message.success('导出成功')
          }).finally(() => {
            target.loading = false
          })
        }
      })
    },
    /** @name 编辑黑名单 **/
    edit (record) {
      record.userId = record.userId || undefined
      this.$refs.BlackForm.open('编辑黑名单', this.deepClone(record), (form, done) => {
        editBlackAPI({
          id: record.id,
          note: form.note
        }).then(() => {
          this.$refs.table.refresh()
          this.$message.success('编辑成功')
          done(true)
        }).finally(() => {
          done(false)
        })
      })
    },
    /** @name 删除黑名单 **/
    deleteBlack (record) {
      this.$set(record, 'loading', true)
      deleteBlackAPI({ id: record.id }).then(() => {
        this.$refs.table.refresh(true)
        this.$message.success('删除成功')
      }).finally(() => {
        this.$set(record, 'loading', false)
      })
    }
  }
}
</script>
